<script setup lang="ts">
import { ref, watch } from "vue";
// 移除默认验证器导入

interface InputProps {
  modelValue: string;
  required?: boolean;
  label?: string;
  placeholder?: string;
  // 自定义验证器prop（必传，否则仅保留必填验证）
  validator?: (
    value: string
  ) =>
    | boolean
    | { valid: boolean; message: string }
    | Promise<{ valid: boolean; message: string }>;
}

const props = defineProps<InputProps>();
const emit = defineEmits(["update:modelValue", "validate"]);

// 内部状态管理（保持不变）
const inputValue = ref(props.modelValue);
const errorMessage = ref("");
const isValidationPassed = ref(true);
const isLoading = ref(false);

// 更新v-model值（保持不变）
const handleInput = (e: Event) => {
  const value = (e.target as HTMLInputElement).value;
  inputValue.value = value;
  emit("update:modelValue", value);
};

// 综合验证方法（移除默认验证器逻辑）
const validate = async (): Promise<boolean> => {
  // 仅保留必填验证
  if (props.required && !inputValue.value.trim()) {
    errorMessage.value = "此字段为必填项";
    isValidationPassed.value = false;
    emit("validate", false);
    return false;
  }

  // 仅使用父组件传递的自定义验证器（无默认验证逻辑）
  if (props.validator) {
    isLoading.value = true;

    try {
      const result = await props.validator(inputValue.value);

      // 处理不同类型的验证结果（保持不变）
      if (typeof result === "boolean") {
        isValidationPassed.value = result;
        errorMessage.value = result ? "" : "验证失败";
      } else {
        isValidationPassed.value = result.valid;
        errorMessage.value = result.message;
      }
    } catch (err) {
      isValidationPassed.value = false;
      errorMessage.value = "验证过程出错";
    } finally {
      isLoading.value = false;
    }

    emit("validate", isValidationPassed.value);
    return isValidationPassed.value;
  }

  // 无自定义验证器且必填验证通过时默认验证通过
  errorMessage.value = "";
  isValidationPassed.value = true;
  emit("validate", true);
  return true;
};

// 监听输入变化触发验证（保持不变）
watch(inputValue, async () => {
  await validate();
});

// 暴露验证方法给父组件（保持不变）
defineExpose({ validate });
</script>

<template>
  <div class="input-container">
    <!-- 修改label部分，添加必填星号 -->
    <label v-if="label" class="input-label">
      {{ label }}
      <span v-if="required" class="required-star">*</span>
    </label>
    <div class="input-wrapper">
      <input
        type="text"
        v-model="inputValue"
        :placeholder="placeholder || '请输入内容'"
        :class="{ 'input-error': !isValidationPassed && errorMessage }"
        @input="handleInput"
        class="tech-input"
      />
      <div v-if="isLoading" class="loading-indicator">
        <div class="spinner"></div>
      </div>
    </div>
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
  </div>
</template>

<style scoped>
.input-container {
  margin-bottom: 1.5rem;
}

.input-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 500;
}

.input-wrapper {
  position: relative;
}

.tech-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  /* 使用明确的边框定义解决浏览器兼容性问题 */
  border-top: 1px solid var(--accent-dark);
  border-right: 1px solid var(--accent-dark);
  border-bottom: 1px solid var(--accent-dark);
  border-left: 1px solid var(--accent-dark);
  /* 添加outline为none确保去除默认边框 */
  outline: none;
  /* 添加box-sizing确保边框计算正确 */
  box-sizing: border-box;
  /* 重置可能影响边框显示的默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 1rem;
  /* 添加过渡效果 */
  transition: all 0.3s ease;
  box-shadow: none;
}

.tech-input:focus {
  /* 显式设置outline为none */
  outline: none;
  /* 确保所有边框在聚焦时都正确显示 */
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  box-shadow: var(--glow);
}

.input-error {
  border-color: #ff4d4f;
}

.error-message {
  color: #ff4d4f;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.loading-indicator {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 240, 255, 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 添加必填星号样式 */
.required-star {
  color: #ff4d4f;
  margin-left: 4px;
}
</style>
